<template>
  <div class="navbar">
    <hamburger class="hamnurger-container"></hamburger>
    <breadcrumb class="breadcrumb-container"></breadcrumb>
    <div class="right-menu">
      <lang-select class="right-menu-item"></lang-select>
      <el-dropdown class="avatar-container" trigger="click" @command='getOut'>
        <div class="avatar-wrapper">
          <el-avatar shape="square" :size="40" :src="img"></el-avatar>
          <i class="el-icon-s-tools"></i>
        </div>
        <el-dropdown-menu slot="dropdown">
          <router-link to="/layout">
            <el-dropdown-item> {{$t('msg.navBar.home')}} </el-dropdown-item>
          </router-link>
          <a target="_blank" href="">
            <el-dropdown-item> {{$t('msg.navBar.course')}} </el-dropdown-item>
          </a>
          <el-dropdown-item command='getOut'> {{$t('msg.navBar.logout')}} </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import store from "../../store/index";
import Hamburger from '../hamburger/index.vue'
import Breadcrumb from '../Breadcrumb/index.vue'
import LangSelect from '../LangSelect/index.vue'
export default {
  components: {
    Hamburger,
    Breadcrumb,
    LangSelect
  },
  data() {
    return {
      img: store.state.user.userInfo.avatar,
    };
  },
  mounted() {},
  methods: {
      getOut(val){
          switch (val) {
              case 'getOut' :
                  this.getOut();
                  break;
          }
      },
      getOut(){
          this.$store.dispatch('getOut')
      }
  },
};
</script>

<style scoped lang='scss'>
.navbar {
  height: 50px;
  overflow: hidden;
  position: relative;
  background: #fff;
  box-shadow: 0px 1px 4px rgba(0, 21, 41, 0.08);

  .hamburger-container{
    line-height: 46px;
    height: 100%;
    float: left;
    cursor: pointer;
    transition: background 0.5s;

    &:hover {
      background: rgba(0, 0, 0, 0.1);
    }
  }

  .breadcrumb-container{
    float: left;
  }

  .right-menu {
    display: flex;
    align-items: center;
    float: right;
    padding-right: 16px;

    ::v-deep .avatar-container {
      cursor: pointer;
      .avatar-wrapper {
        margin-top: 5px;
        position: relative;
        .el-avatar {
          --el-avatar-background-color: none !important;
          margin-right: 12px;
          border-radius: 10px;
        }
      }
    }

    ::v-deep .right-menu-item {
      display: inline-block;
      padding: 0 18px 0 0;
      font-size: 24px;
      color: #5a5e66;
      vertical-align: text-bottom;

      &.hover-effect {
        cursor: pointer;
      }
    }
  }
}
</style>
